<template>
    <el-select @change="changeLanguage" id="language" v-model="value" class="setLans" ref="selectRef" > <!--v-custom-click-->
        <template slot="prefix" v-if="isShowIcon">
            <div class="lang-icon pointer">
                <img src="@/assets/images/ic_language@3.png" alt="" />
            </div>
        </template>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :id="'languageOptions_' + item.value" />
    </el-select>
</template>

<script>
import { setup } from '@/lang';
import { getLanguage, setLanguage } from '@/api/language';
import language from '@/lang/data';
import { EventBus } from '@/utils/eventBus';
import { LOCAL_KEY } from '@/constant/dict';

export default {
    name: 'switchLanguage',
    inject: ['reload'],
    data() {
        return {
            options: language(process.env.VUE_APP_PROJECT_NAME).options,
            value: language(process.env.VUE_APP_PROJECT_NAME).default,
            lang: '',
            langMap: {
                en: 'en',
                zh: 'zh',
                // hk: 'hk',
                // thai: 'thai',
                // es: 'es',
                // fr: 'fr',
                // de: 'de',
                // it: 'it',
                // pt: 'pt',
                // ar: 'ar'
            }
        };
    },

    async created() {
        this.value = localStorage.getItem(LOCAL_KEY.IS_CURRENT_LANGUAGE);

        await this.loadLanguage();

        if (this.$i18n != null) {
            this.$i18n.locale = this.value;
        }

        setup(this.value);
    },

    methods: {

        // 获取语言
        async loadLanguage() {
            const res = await getLanguage();

            this.lang = this.langMap[res] ? res : this.langMap.en;

            this.value = this.lang;

            if (this.$i18n != null) {
                this.$i18n.locale = this.value;
            }

            setup(this.value);
        },

        changeLanguage(val) {
            this.value = val;
            this.$i18n.locale = this.value;

            this.lang = this.langMap[this.value] || this.langMap.en;

            setLanguage(this.lang)
                .then((response) => {
                    setup(this.value);
                    // 为了重新实例化vue-router对象，避免一些bug
                    this.reload();
                    this.$router.go(0);
                })
                .catch(console.error);
        },

        loseFocus() {
            if (this.$refs.selectRef) {
                this.$refs.selectRef.blur();
            }
        }
    },

    mounted() {
        document.addEventListener('click', this.loseFocus);
    },

    beforeUnmount() {
        document.removeEventListener('click', this.loseFocus);
    },

    destroyed() {
        
    },

    computed: {
        // 显示切换语言按钮
        isShowIcon() {
            return true;
        }
    }
};
</script>

<style lang="less" scoped>
.lang-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    img {
        width: 18px;
        object-fit: cover;
    }
}
</style>
